// @ts-check
import React, { Component } from 'react'
import PT from 'prop-types'
import Engine from '../../engine/EngineCannon'
import './FPSGame.css'

class TankGameFS extends Component {
  static propTypes = {
    onPushClientEvent: PT.func.isRequired
  }

  state = {
    width: 800,
    height: 600,
    info: ''
  }

  isCursorLocked = false

  componentDidMount() {
    this.engine = new Engine({
      canvas: this.canvas,
      width: this.state.width,
      height: this.state.height,
      onNext: this.handleNext
    })
    this.engine.start()
    document.addEventListener('keydown', this.keyDown)
    document.addEventListener('keyup', this.keyUp)
    document.addEventListener('mousemove', this.handleMouseMove)
    document.addEventListener('click', this.shoot)

    this.updateCanvasSize()
    window.addEventListener('resize', this.updateCanvasSize)
    document.addEventListener('pointerlockchange', this.handlePointerLockChange)
  }

  handleNext = () => {
    const y = this.engine.yawObject.rotation.y * 180 / Math.PI
    const x = this.engine.pitchObject.rotation.x * 180 / Math.PI
    this.setState({
      info: `x: ${x}, y: ${y}`
    })
  }

  updateCanvasSize = () => {
    this.setState({
      width: window.innerWidth,
      height: window.innerHeight
    })
    this.engine.updateSize({
      width: window.innerWidth,
      height: window.innerHeight
    })
  }

  componentWillUnmount() {
    document.removeEventListener('keydown', this.keyDown)
  }

  handlePointerLockChange = e => {
    this.isCursorLocked = !this.isCursorLocked
  }

  handleMove = direction => {
    this.engine.movePlayer(direction, true)
    // this.props.onPushClientEvent(this.engine.generateSelfEvent({
    //   type: 'tank_move',
    //   payload: direction
    // }))
  }

  // handleShoot = () => {
  //   this.engine.tank.shoot()
  //   this.props.onPushClientEvent(this.engine.generateSelfEvent({
  //     type: 'tank_shoot'
  //   }))
  // }

  handleLockCursor = () => {
    if (this.isCursorLocked) {
      return
    }
    document.body.requestPointerLock()
  }

  handleMouseMove = e => {
    if (this.isCursorLocked) {
      // this.engine.rotate(e.movementX, e.movementY)
      this.engine.rotate(e)
    }
  }

  shoot = () => {
    if (this.isCursorLocked) {
      this.engine.shoot()
    }
  }

  keyUp = () => {
    this.engine.movePlayer(null, false)
  }

  keyDown = (evt) => {
    // TODO 组合键
    switch (evt.key) {
      case 'w':
        this.handleMove('forward')
        break
      case 'd':
        this.handleMove('right')
        break
      case 's':
        this.handleMove('backward')
        break
      case 'a':
        this.handleMove('left')
        break
      case ' ':
        this.engine.playerJump()
        break
      case 'v':
        this.engine.switchCamera()
        break
      // 测试击中效果
      // case 'j':
      //   this.engine.tank.injured()
      //   break
      default:
        break
    }
  }

  render() {
    const { width, height, info } = this.state
    return (
      <div>
        <div className="fps-info">{info}</div>
        <canvas
          // onMouseMove={this.handleMouseMove}
          onClick={this.handleLockCursor}
          ref={ref => { this.canvas = ref }}
          width={width}
          height={height}
        />
      </div>
    )
  }
}

export default TankGameFS
